<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        添加
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">图书馆</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="newData">
                        <div>
                            <label>书名 <br><input type="text" placeholder="请输入书名" id="bookname" name="bookname"></label>
                        </div>
                        <div>
                            <label>作者 <br><input type="text" placeholder="请输入作者" id="author" name="author"></label>
                        </div>
                        <div>
                            <label>出版社 <br><input type="text" placeholder="请输入出版社" id="publisher"
                                    name="publisher"></label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="closeBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="updateModel" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">图书馆</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="updateData">
                        <div>
                            <label>书名 <br><input type="text" placeholder="请输入书名" id="bookname" name="bookname"></label>
                        </div>
                        <div>
                            <label>作者 <br><input type="text" placeholder="请输入作者" id="author" name="author"></label>
                        </div>
                        <div>
                            <label>出版社 <br><input type="text" placeholder="请输入出版社" id="publisher"
                                    name="publisher"></label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="updateBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <table id="data">
        <!-- <tr>
            <th>Id</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr> -->
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.js"></script>
    <script>
        // 查
        function refresh() {
            fetch('http://192.168.22.29:4000/books')
                .then(res => res.json())
                .then(res => {
                    const dataForm = document.querySelector('#data')
                    const lists = res.data.map((el) => {
                        return `
                            <tr>
                                <td>${el.id}</td>
                                <td>${el.bookname}</td>
                                <td>${el.author}</td>
                                <td>${el.publisher}</td>
                                <td>
                                    <button class='delete' data-id='${el.id}'>删除</button>
                                    <button data-bookname='${el.bookname}' data-author='${el.author}' data-publisher='${el.publisher}' class='update' data-id='${el.id}' data-bs-toggle="modal" data-bs-target="#updateModel">修改</button>
                                </td>
                            </tr>
                        `
                    }).join('')
                    dataForm.innerHTML = `
                        <tr>
                            <th>Id</th>
                            <th>书名</th>
                            <th>作者</th>
                            <th>出版社</th>
                            <th>操作</th>
                        </tr>
                    ` + lists

                    // 删
                    const deleteBtn = document.querySelectorAll('.delete')
                    deleteBtn.forEach((el) => {
                        el.onclick = (e) => {
                            const id = e.target.dataset.id
                            console.log(id)
                            fetch('http://192.168.22.29:4000/books?id=' + id, {
                                method: 'delete'
                            }).then(res => res.json()).then(res => {
                                refresh()
                            })
                        }
                    })

                    // 修改
                    const updateBtns = document.querySelectorAll('.update')
                    updateBtns.forEach((el) => {
                        el.onclick = (e) => {
                            const updateData = document.querySelector('#updateData')
                            updateData.querySelector('[name="bookname"]').value = el.dataset.bookname
                            updateData.querySelector('[name="author"]').value = el.dataset.author
                            updateData.querySelector('[name="publisher"]').value = el.dataset.publisher
                            document.querySelector('#updateBtn').onclick = () => {
                                const formData = new FormData(updateData)
                                fetch('http://192.168.22.29:4000/books', {
                                    method: 'put',
                                    headers: {
                                        "content-type": "application/json",
                                    },
                                    body: JSON.stringify({
                                        id: el.dataset.id,
                                        author: formData.get("author"),
                                        publisher: formData.get("publisher"),
                                        bookname: formData.get("bookname")
                                    })
                                }).then(res => res.json()).then(res => {
                                    refresh()
                                })
                            }
                        }
                    })
                })
        }
        refresh()

            // 增
            ; (function () {
                const closeBtn = document.querySelector('#closeBtn')
                const newData = document.querySelector('#newData')
                closeBtn.onclick = () => {
                    const formData = new FormData(newData)
                    const bookname = formData.get('bookname')
                    const author = formData.get('author')
                    const publisher = formData.get('publisher')
                    fetch('http://192.168.22.29:4000/books', {
                        method: 'POST',
                        headers: {
                            'content-type': 'application/json'
                        },
                        body: JSON.stringify({
                            bookname,
                            author,
                            publisher
                        })
                    }).then(res => res.json())
                        .then(res => {
                            refresh()
                        })
                }

            })()

    </script>
</body>

</html>